<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目名称">
        <el-select v-model="queryParams.projectId" placeholder="请选择项目" @change="handleProjectChange">
          <el-option v-for="project in projectList"
                     :label="project.projectName"
                     :value="project.projectId"
                     :key="project.projectId"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div ref="main" style="width: 100%; height: 800px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {procurementStatistics} from "@/api/prodata/procurementStatistics";
import {listProjectAllByUserId} from "@/api/project/project";

export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        projectId: null,
      },
      // 显示搜索条件
      showSearch: true,
      // 项目列表
      projectList: [],
      //图表容器对象
      myChart: null,
      //图表各项属性
      option: null
    }
  },
  created() {
    this.getProjectList();
  },
  mounted() {
    let colors = [
      // 定义颜色数组 适合显示黑色文字 色系相似
      'rgba(215,38,33,0.50)',
      'rgba(40,71,85,0.50)',
      'rgba(68,163,170,0.50)',
      'rgba(228,127,97,0.50)',
      'rgba(218,137,32,0.50)',
      'rgba(196,162,154,0.50)',
      'rgba(110,113,117,0.50)',
      'rgba(79,103,113,0.50)',
    ];

    //1, 初始化图表容器
    this.myChart = echarts.init(this.$refs.main);

    //2, 图表各项属性
    this.option = {
      // 标题
      title: {
        text: '材料采购情况',
        left: 'center'
      },
      // 提示信息
      tooltip: {
        formatter: function (params) {
          return '已到场 ' + params.value + '%';
        }
      },
      // 工具箱
      toolbox: {
        show: true,
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      // y轴
      yAxis: {
        name: '材料名称',
        type: 'category',
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        data: []
      },
      // x轴
      xAxis: {
        name: '百分比',
        type: 'value',
        axisLabel: {
          formatter: '{value}%'
        }
      },
      // 图表系列
      series: [{
        data: [],
        type: 'bar',
        itemStyle: {
          normal: {
            color: function (params) {
              return colors[params.dataIndex % colors.length]; // 循环使用颜色数组
            }
          }
        },
        label: {
          show: true,
          position: 'right',
          formatter: function (params) {
            return params.value + '%';
          }
        }
      }]
    };
  },

  methods: {
    paymentStatistics() {
      procurementStatistics(this.queryParams.projectId).then(response => {
          this.option.yAxis.data = response.data.materiaNameList;
          this.option.series[0].data = response.data.percentageList.map(item => (item * 100).toFixed(2));
          this.myChart.setOption(this.option);
        }
      ).catch(() => {
      })
    },
    handleProjectChange() {
      this.paymentStatistics();
    },
    getProjectList() {
      listProjectAllByUserId().then(respnse => {
        this.projectList = respnse.data;
        if (this.projectList != null) {
          this.queryParams.projectId = this.projectList[0].projectId;
          this.paymentStatistics();
        }
      }).catch(() => {
      });
    },
  },
}
</script>

<style scoped>

</style>
